<template>
    <div class="articleStatusMoreContainer">
        <header></header>
        <div class="status-box">
            <div class="statusPos">
                <span class="onlyRead"></span><span class="status">只可读</span>
            </div>
            <div class="statusPos">
                <span class="haveRead"></span><span class="status">已反馈</span>
            </div>
            <div class="statusPos">
                <span class="noRead"></span><span class="status">未反馈</span>
            </div>
        </div>
        <el-table :data="tableData" :show-header="false" @row-click="openMenuFunction" style="width: 100%">
            <el-table-column width="40">
                <template slot-scope="scope">
                    <div class="todo-tag" v-bind:class="{'activeNoRead':((scope.row.typeId==='30021') && Number(scope.row.deptFeedState) === 1),'activeHaveRead':((scope.row.typeId==='30021') && Number(scope.row.deptFeedState) === 0)}">{{scope.$index+1}}</div>
                </template>
            </el-table-column>
            <el-table-column  prop="name" label="名称"></el-table-column>
            <el-table-column  prop="createTime" label="创建日期" width="180"></el-table-column>
            <el-table-column  prop="creator" label="创建者" width="180"></el-table-column>
            <el-table-column  prop="publishTime" label="发布日期" width="180"></el-table-column>
        </el-table>
        <CustomPagination
            :totalPages="pageController.totalPages"
            :totalNum="pageController.totalNum"
            :currentPage="pageController.currentPage"
            :perPageSuggestion="perPageSuggestion"
            @perPageChange="handlePerPageChange"
            @toFirstPage="toFirstPage"
            @toLastPage="toLastPage"
            @toNextPage="toNextPage"
            @toEndPage="toEndPage"
            @toTargetPage="toTargetPage"
        ></CustomPagination>
    </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil';
import CustomPagination from '../componentStore/common/CustomPagination';
export default {
    name: 'ArticleStatusMore',
    data () {
        return {
            tableData: [],
            pageController:{
                totalPages:'',
                totalNum:'',
                currentPage:1,
                ps:6
            },
            articleDetail: './articleDetail.html'

           
        };
    },
    components:{
        CustomPagination
    },
    created(){
        let url = window.location.href;
        this.categoryId = appUtil.getParamFromUrl(url,'categoryId');
        this.name = appUtil.getParamFromUrl(url,'name');
        this.articleDetailFn(this.pageController);
    },
    methods: {
        // 初始化数据
        articleDetailFn(pageController){
            let data = {
                categoryId:this.categoryId,
                userId:appUtil.getSes('userId'),
                deptCodes:[appUtil.getLocal('orgCode')],
                roleIds:typeof(appUtil.getSes('roleIds')) === 'object'?appUtil.getSes('roleIds') : [appUtil.getSes('roleIds')],
                status:'1',
                ps:pageController.ps,
                pn:pageController.currentPage
            };
            this.$axios.get('/ptp-cms/cmscontent/getContentByUserIdDeptCode?userId='+data.userId+'&deptCodes='+data.deptCodes+'&categoryId='+data.categoryId+'&roleIds='+data.roleIds+'&status="1"&ps='+data.ps+'&pn='+data.pn,)
                .then(res => {
                    this.tableData = res.data.data.dataList;
                    this.pageController.totalPages = res.data.data.totalPage;
                    this.pageController.totalNum = res.data.data.totalNumber;
                    this.pageController.currentPage = res.data.data.pageNumber;
                });
        },
        // 打开详情页面
        openMenuFunction(row){
            if(row.typeId ==='30021'){
                let routeData = this.$router.resolve({
                    path: '/FeedbackDetail',
                });
                let url = window.location.href.split('#')[0]+routeData.href+'?typeId=' + row.typeId + '&articleId='+ row.id;
                window.open(url, '_blank');
            }else{
                let url = this.articleDetail+'?typeId=' + row.typeId + '&articleId='+ row.id;
                window.open(url, '_blank');
            }  
        },
        toFirstPage () {
            this.toTargetPage(1);
        },
        toLastPage () {
            let target = this.pageController;
            if (target.currentPage > 1) {
                this.toTargetPage(target.currentPage - 1);
            }
        },
        toNextPage () {
            let target = this.pageController;
            if (target.currentPage < target.totalPages) {
                this.toTargetPage(target.currentPage + 1);
            }
        },
        toEndPage () {
            this.toTargetPage(this.pageController.totalPages);
        },
        toTargetPage (pageNum) {
            let target = this.pageController;

            if (target.currentPage !== pageNum) {
                target.currentPage = pageNum;
                target.start = target.perPage * (pageNum - 1);
            }
            this.articleDetailFn(this.pageController);
        },
        handlePerPageChange (perPage) {
            this.pageController.perPage = perPage;
            //重新算出当前页第一条数据的序号，以便重新加载表格
            this.resetPageController(this.currentPageTableData.length, perPage, this.pageController.currentPage);
        },
    },
};
</script>

<style lang="scss" scoped>
    .articleStatusMoreContainer{
        header{
            height: 40px;
            line-height: 40px;
            color: #0066FF;
            border-bottom: 1px solid #eee;
            padding-left: 16px;
            font-size: 16px;
        }
         .el-table .cell{
            padding-left: 16px;
        }
    }
    .activeNoRead{
        background:#64d572 !important;
    }
    .activeHaveRead{
        background:#f25e43 !important;
    }
    .statusPos{
    float:left;
    margin-right:10px;
    position:relative;
    width:60px;
  }
  .status{
    display:inline-block;
    margin-left:14px;
  }
  .status-box{
    position:absolute;
    top:14px;
    left:15%;
    font-size:12px;
    font-weight:400;
  }
  .onlyRead{
    background:#a7a7a7;
    width:12px;
    height:12px;
    border-radius:4px;
    position:absolute;
    top:3px;
    left:0px;
    
  }
  .haveRead{
    background:#64d572;
    width:12px;
    height:12px;
    border-radius:4px;
    position:absolute;
    top:3px;
    left:0px;
  }
  .noRead{
    background:#f25e43;
    width:12px;
    height:12px;
    border-radius:4px;
    position:absolute;
    top:3px;
    left:0px;
  }
</style>
